<template>
  <XtxDialog title="添加收货地址" v-model:visible="dialogVisible">
    <div class="address-edit">
      <div class="xtx-form">
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>收货人：</div>
          <div class="field">
            <input class="input" placeholder="请输入收货人" v-model="form.receiver"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>手机号：</div>
          <div class="field">
            <input class="input" placeholder="请输入手机号" v-model="form.contact"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>地区：</div>
          <div class="field">
            <XtxCity placeholder="请选择所在地区" :fullLocation="form.fullLocation" @change="changeCityFn"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>详细地址：</div>
          <div class="field">
            <input class="input" placeholder="请输入详细地址" v-model="form.address"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">邮政编码：</div>
          <div class="field">
            <input class="input" placeholder="请输入邮政编码"  v-model="form.postalCode"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地址标签：</div>
          <div class="field">
            <input class="input" placeholder="请输入地址标签，逗号分隔"  v-model="form.addressTags"/>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <XtxButton type="gray" style="margin-right: 20px" @click="cancelFn"
        >取消</XtxButton
      >
      <XtxButton type="primary" @click="confirmFn">确认</XtxButton>
    </template>
  </XtxDialog>
</template>
<script>
import { ref, reactive } from 'vue'
import { addAddressAPI } from '@/api'
export default {
  name: 'AddressEdit',
  emits: ['success'],
  setup (props, { emit }) {
    const dialogVisible = ref(false)
    // 表单数据对象
    const form = reactive({
      receiver: '',
      contact: '',
      address: '', // 收货地址(详细)
      postalCode: '',
      addressTags: '',
      isDefault: 1 // 新添加的地址不是默认地址
    })
    // 收货地址(省市区)选择
    const changeCityFn = (obj) => {
      /**
       * {
       *    cityCode: "361000"
            cityName: "抚州市"
            countyCode: "361025"
            countyName: "乐安县"
            fullLocation: "江西省 抚州市 乐安县"
            provinceCode: "360000"
            provinceName: "江西省"
       * }
       */
      for (const key in obj) {
        form[key] = obj[key]
      }
    }
    // 确定按钮(点击事件)
    const confirmFn = async () => {
      await addAddressAPI(form)
      emit('success') // 通知父组件, 重新请求一次地址列表
      dialogVisible.value = false // 添加成功-就关闭弹窗
    }

    // 打开函数
    const open = () => {
      dialogVisible.value = true
    }

    // 取消(点击事件)
    const cancelFn = () => {
      dialogVisible.value = false
    }
    return { dialogVisible, open, cancelFn, form, changeCityFn, confirmFn }
  }
}
</script>
<style scoped lang="less">
.xtx-dialog {
  :deep(.wrapper) {
    max-height: 100%;
    overflow-y: auto;
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.address-edit {
  .red {
    color: var(--price-color);
    position: relative;
    top: 2px;
    margin-right: 2px;
  }
  .xtx-form {
    padding: 0;
    input {
      outline: none;
      &::placeholder {
        color: #ccc;
      }
    }
  }
  .xtx-city {
    width: 320px;
    :deep(.select) {
      height: 50px;
      line-height: 48px;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      .placeholder {
        color: #ccc;
      }
      i {
        color: #ccc;
        font-size: 18px;
      }
      .value {
        font-size: 14px;
      }
    }
    :deep(.option) {
      top: 49px;
    }
  }
}
</style>
